<template>
  <a-layout class="editor">
    <a-layout-content class="canvas">
      <div class="canvas-container" ref="editor">
        <div id="container" ref="container" class="container shadow-2xl" :style="canvasEditStyle">
          <template v-for="item in componentList" :key="item.key">
            <prview-component :item="item" />
          </template>
        </div>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
// // 获取路由参数
import { useRoute } from "vue-router"
// //
import { useComponent, useScale, useVisual } from "@/hooks/userEditor.js"
import visualApi from "@/views/visual/api/visual.js"
import { Message } from "@arco-design/web-vue"
import PrviewComponent from "@/views/visual/screen/previewComponent.vue"
import { useTitle } from "@vueuse/core"
//
const route = useRoute()
// // 获取屏幕id
const screenId = route.query.id
const { commonStyle, visual, canvasEditStyle } = useVisual()
//
const title = useTitle("")
const { getComponent, componentList } = useComponent()

const editor = ref(null)
const { handleScale } = useScale(editor)
handleScale()
onMounted(async () => {
  if (!screenId) {
    visual.value.title = "未命名"
    return
  }
  // 获取屏幕详情
  const getVisual = await visualApi.read(screenId)
  // 正在加载
  await Message.loading("正在加载")
  visual.value = getVisual.data
  title.value = getVisual.data.title
  const res = await visualApi.getVisualConfig({ id: screenId })
  if (!res.data.config_json) return
  const config_json = JSON.parse(res.data.config_json)
  commonStyle.value = { ...commonStyle.value, ...config_json?.detail }
  await getComponent(config_json.component)
})

// 卸载
onUnmounted(() => {
  componentList.value = []
})
</script>

<style scoped lang="less">
.editor {
  height: 100%;
  background-color: var(--color-bg-white);
  .canvas {
    height: calc(100% - 50px);
    position: relative;
    box-sizing: border-box;
    overflow: auto;
    background-color: var(--color-fill-2);

    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    // 滚动条
    &-container {
      width: 100%;
      height: 100%;
      position: relative;

      .container {
        position: relative;
        width: 100%;
        height: 100%;
        transform-origin: left top;

        .component {
          position: absolute;
        }
      }
    }
  }
}
</style>
